<!DOCTYPE html>
<html>
<head>
    <title>Spherical Pendulum Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(fromx, fromy, tox, toy, headlen = 10) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // Set common styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = 'italic 20px Times New Roman';
        
        // Define key points
        const O = { x: 250, y: 150 };
        const m_pos = { x: 310, y: 280 };
        const final_pos = { x: 120, y: 150 };
        const mass_radius = 6;

        // 1. Draw the vertical axis OO'
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(O.x, 80);
        ctx.lineTo(O.x, 380);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // 2. Draw labels for the axis
        ctx.fillText('O', O.x - 25, O.y);
        ctx.fillText("O'", O.x - 25, 390);

        // 3. Draw the trajectory path (dashed spiral)
        ctx.save();
        ctx.lineWidth = 1;
        ctx.setLineDash([4, 4]);
        ctx.beginPath();
        // Lower part of the spiral, leading up to the initial position m
        // This part represents the motion just before the point 'm'
        let startPath = {x: 180, y: 310};
        ctx.moveTo(startPath.x, startPath.y);
        ctx.bezierCurveTo(250, 330, 340, 300, m_pos.x, m_pos.y);
        // Upper part of the spiral, from initial position m to the final position
        ctx.bezierCurveTo(250, 250, 100, 200, final_pos.x, final_pos.y);
        ctx.stroke();
        ctx.restore();

        // 4. Draw the final state (theta = 90 degrees)
        // Dashed line from pivot O to the final position
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(O.x, O.y);
        ctx.lineTo(final_pos.x, final_pos.y);
        ctx.stroke();
        ctx.setLineDash([]);
        // Mass at the final position (unfilled circle)
        ctx.beginPath();
        ctx.arc(final_pos.x, final_pos.y, mass_radius, 0, 2 * Math.PI);
        ctx.lineWidth = 1;
        ctx.stroke();
        ctx.lineWidth = 1.5;
        // Velocity vector v at the final position
        drawArrow(final_pos.x, final_pos.y, final_pos.x, final_pos.y + 60);
        ctx.fillText('v', final_pos.x + 10, final_pos.y + 35);
        
        // 5. Draw the initial state
        // Pendulum rod (solid line)
        ctx.beginPath();
        ctx.moveTo(O.x, O.y);
        ctx.lineTo(m_pos.x, m_pos.y);
        ctx.stroke();
        // Mass m (filled circle)
        ctx.beginPath();
        ctx.arc(m_pos.x, m_pos.y, mass_radius, 0, 2 * Math.PI);
        ctx.fill();
        ctx.fillText('m', m_pos.x + 15, m_pos.y + 5);
        // Initial velocity vector v₀
        drawArrow(m_pos.x, m_pos.y, m_pos.x - 70, m_pos.y - 10);
        ctx.fillText('v', m_pos.x - 85, m_pos.y - 5);
        ctx.font = 'italic 14px Times New Roman';
        ctx.fillText('0', m_pos.x - 75, m_pos.y);
        ctx.font = 'italic 20px Times New Roman';
        
        // 6. Draw the angle theta
        ctx.beginPath();
        const angle_rad = Math.atan2(m_pos.y - O.y, m_pos.x - O.x);
        ctx.arc(O.x, O.y, 40, Math.PI / 2, angle_rad);
        ctx.stroke();
        ctx.fillText('θ', O.x + 15, O.y + 35);

        // 7. Draw the caption
        ctx.font = '18px Song Ti'; // Use a font that supports Chinese characters
        ctx.fillText('习题 2-49 图', 200, 420);

    </script>
</body>
</html>